<!-- StudyPlanSelectCourseList_Win.html -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
		<title>选课课程列表</title>
		<link rel="stylesheet" type="text/css" href="../../css/api.css" />
		<link rel="stylesheet" href="../../css/weui.min.css">
		<link rel="stylesheet" href="../../css/mui.min.css"/>
		<link rel="stylesheet" href="../../css/base.css"/>
		<link rel="stylesheet" href="../../css/CFNetPP_Base.css">
		<style type="text/css">
			.mui-table-view{
				margin-left: 0;
			}
			.mui-table-view-cell>a:not(.mui-btn){
				padding: 10px;
			}
			.mui-table-view-cell>a:not(.mui-btn) .course-img{
				display:block;
				width: 136px;
				max-width: 136px;
				height: 84px;
				background-image: url(../../image/course_placehoder.png);
				background-size: 136px 84px;
			}
			.mui-table-view-cell .top-content{
				height: 40px;
			}
			.mui-table-view-cell .bottom-content{
				/*padding-top: 16px;*/
				height: 44px;
			}
			.mui-table-view-cell>a:not(.mui-btn) .course_title{
				overflow: hidden;
			 	text-overflow: ellipsis;
			 	white-space: pre-wrap;
			 	display: -webkit-box;
			 	-webkit-line-clamp: 2;
			 	-webkit-box-orient: vertical;
			 	font-size: 14px;
			 	color: #222;
			 	line-height: 20px;
			}
			.mui-table-view-cell>a:not(.mui-btn) .subtitle{
				color: #999;
				font-size: 12px;
				overflow: hidden;
				white-space: normal;
			 	text-overflow: ellipsis;
			 	line-height: 14px;
			}
			/*.subtitle .right-span{
				margin-left: 10px;
			}*/
			.subtitle-red{
				color: #e10d20;
				font-size: 12px;
				margin: 0;
			}
			.cell-btn{
				font-size: 12px;
			    font-weight: 400;
			    line-height: 1.2;
			    padding: 4px 6px;
			    border-color: #1da4e8;
			    background-color: #1da4e8;
			    color: white;
			    width: 70px;
			}	
			.cell-btn:enabled:active{
				background-color: #2db4f8;
			}
			.bottom-content .cell-content-left{
				padding-right: 68px;
				float: left;
			}
			.bottom-content .cell-content-right{
				padding-top: 10px;
				width: 68px;
				height: 42px;
				float: right;
				position: absolute;
				right: 10px; 
				top: 50px;
			}
			.button-super-div{
				padding: 2px 0;
			}
			.course-status-tag{
				position: absolute;
				bottom: 10px;
				left: 10px;
				font-size: 12px;
				color: white;
				padding: 2px 4px;
				line-height: 1em;
				width: 136px;
				background-color: rgba(0,0,0,0.5);
				text-align: center;
			}
			.course-status-tag-red{
				background-color: #EC1A2B;
			}
			.course-status-tag-green{
				background-color: #1DBF53;
			}
			.tag-img{
				width: 12px;
				height: 12px;
				margin-right: 4px;
			}
			.cell-btn{
				margin-right: 10px;
			}
			.info-span{
				margin-left: 10px;
			}
			.mui-table-view .mui-media-object.mui-pull-left{
				margin-right: 12px;
			}
			.top-p{
				margin-top: 10px;
			}
			.bottom-p{
				margin-top: 6px;
			}
			.mui-table-view-cell{
				padding: 10px;
			}
			.mui-table-view-cell.mui-checkbox.mui-left, .mui-table-view-cell.mui-radio.mui-left{
				padding-left: 50px;
			}
			.mui-checkbox input[type=checkbox]:before, .mui-radio input[type=radio]:before{
			    position: absolute;
			    top: 28px;
			    left: -10px;
			}
			.mui-checkbox input[type=checkbox]:checked:before, .mui-radio input[type=radio]:checked:before{
				color: #18b4ed;
			}
			.add-btn{
				color: white;
				background-color: #18b4ed;
				border-color: #18b4ed;
				margin-top: 10px;
			}
			.add-btn:enabled:active{
				background-color: #08a4dd;
				border-color: #08a4dd;
			}
			.base_icon{
				width: 20px;
				margin-top: 12px;
			}
			.bottom-div{
				height: 40px;
				width: 100%;
				position: fixed;
				bottom: 0;
				left: 0;
			}
			.bottom-checkbox input[type=checkbox]:before{
			    position: absolute;
			    top: 0;
			    left: -10px;
			}
			.bottom-left-div{
				margin-right: 100px;
				line-height: 24px;
				font-size: 14px;
				color: #222;
			}
			.bottom-right-div{
				width: 100px;
				float: right;
				font-size: 16px;
				background-color: #18b4ed;
				text-align: center;
				line-height: 40px;
				color: white;
			}
			.base_navigation_bar,#BarAppearance {
				z-index: 1;
			}
			.top-right-p{
				float: right;
			}
			.top-left-p{
				float: left;
			}
			.search-div{
				margin-left: 54px;
				width: calc(100% - 74px);
			}
			.mui-input-clear[type=search]{
				margin-top: 6px;
				margin-bottom: 0;
				background-color: white;
				color: #222;
				border-radius: 15px;
				height: 30px;
				font-size: 14px;
				text-align: left;
			}
			.search-icon{
				width: 20px;
				position: absolute;
				left: 4px;
				top: 11px;
			}
			.down-img{
				position: absolute;
				right: 10px;
				top: 10px;
				width: 18px;
			}
			.zhanwei-span{
				width: 16px;
			}
		</style>
	</head>
	<body>
		<div class="base_style_color " id='BarAppearance' style="height: 22px;width: 100%"></div>
	    <div class="base_navigation_bar base_style_color base_navigation_item_bar">
        	<div class="mui-input-row mui-search search-div">
        		<img class="search-icon" src="../../image/icon_search.png">
				<input id="search_input" type="search" class="mui-input-clear" placeholder="请输入课程名称搜索">
			</div>
			<a class="base_left_item" href="#" onclick="backClick()">
	            <img class="base_back_icon" src="../../image/icon_jiantou.png" alt="">
	        </a>
	    </div>
	    <div class="base_content_div">
	    	<ul class="mui-table-view">
	    		<li class="mui-table-view-cell">
	    			<p id="category_select" class="top-right-p base_dark_grey base_content_font" onclick="onSelectCategoryClick()">
	    				分类：<span id="selected_category">我的课程</span>
	    				<span class="zhanwei-span"></span>
	    				<img class="down-img" src="../../image/icon_category_down.png">
	    			</p>
	    			<p class="top-left-p base_dark_grey base_content_font">
	    				共<span id="course_num">0</span>门课程
	    			</p>
	    		</li>
	    	</ul>
	    </div>
	</body>
	<script type="text/javascript" src="../../script/jquery.min.js"></script>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/MD5.js"></script>
	<script type="text/javascript" src="../../script/requestTool.js"></script>
	<script type="text/javascript">
		var categoryIsShow = false;
		apiready = function(){
			setupFrame();
			setupSearchClick();
			setupNotifi();
		}
		function setupNotifi(){
			api.addEventListener({
			    name: 'planCourseCategoryNotifi'
			}, function(ret, err) {
			    $("#selected_category").text(ret.value.currentCategoryTitle);
			});
			api.addEventListener({
			    name: 'searchPlanCourseNumNotifi'
			}, function(ret, err) {
			    $("#course_num").text(ret.value.searchPlanCourseNum);
			});
		}
		function onSelectCategoryClick(){
			//planCourseCategoryNotifi
			if (categoryIsShow == true) {
				api.setFrameAttr({
				    name: 'StudyPlanCategory',
				    hidden: true
				});
				categoryIsShow = false;
			}else{
				var y = $('#BarAppearance').height() + $('.base_navigation_bar').height() + $('.base_content_div').height();
		        var h = api.winHeight - y;
				api.openFrame({
				    name: 'StudyPlanCategory',
				    url: 'StudyPlanCategory.html',
				    rect: {
				        x: 0,
				        y: y,
				        w: 'auto',
				        h: h
				    },
				    bounces: false
				});
				api.setFrameAttr({
				    name: 'StudyPlanCategory',
				    hidden: false
				});
				categoryIsShow = true;
			}
		}
		function setupFrame(){
			var y = $('#BarAppearance').height() + $('.base_navigation_bar').height() + $('.base_content_div').height();
	        var h = api.winHeight - y;
			api.openFrame({
			    name: 'StudyPlanSelectCourseList_Frame',
			    url: 'StudyPlanSelectCourseList_Frame.html',
			    rect: {
			        x: 0,
			        y: y,
			        w: 'auto',
			        h: h
			    },
			    pageParam : {
					sourceurl : window.location.pathname,
					sourcetitle : document.title,
					pid : api.pageParam.pid
				},
			    bounces: false
			});
		}
		function backClick(){
			api.closeWin();
		}
		function setupSearchClick(){
			$('#search_input').bind('input propertychange', function() { 
				var searchKeyword = $('#search_input').val();  
			    api.sendEvent({
			        name: 'searchPlanCourseNotifi',
			        extra: {
			            keyword: searchKeyword
			        }
			    });
			});
			$('#search_input').bind('keydown',function(event){  
				if(event.keyCode == "13"){  
				    var searchKeyword = $('#search_input').val();  
				    api.sendEvent({
				        name: 'searchPlanCourseNotifi',
				        extra: {
				            keyword: searchKeyword
				        }
				    });
				}  
			});
		}
	</script>
</html>